<template>
  <div class="divBox disTriList">
    <el-card class="box-card" shadow="hover">
      <template v-slot:header class="clearfix">
        <div class="container">
          <el-form ref="replyRefs" :model="tableFrom" label-width="85px" class="replyCls">
            <el-row :gutter="20">
              <el-col v-bind="grid">
                <el-form-item label="配送人搜索：" class="search-select">
                  <el-input v-model="tableFrom.keyword" placeholder="请输入配送人姓名" size="small" clearable>
                    <el-button slot="append" icon="el-icon-search" size="small" @click="getList('1')" />
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col v-bind="grid">
                <el-form-item label="配送人状态：" class="selectFormWidth100">
                  <el-select v-model="tableFrom.isShow" placeholder="请选择评价状态" size="small" @change="getList('1')">
                    <el-option label="全部" :value="-99" />
                    <el-option label="显示" :value="1" />
                    <el-option label="不显示" :value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addDisTri">添加配送人</el-button>
        <el-tooltip :disabled="!disabledDisTri" class="ml10" effect="dark" content="本页至少选择一项" placement="bottom">
          <div style="display: inline-block;">
            <el-button :disabled="disabledDisTri" size="small" icon="el-icon-close" type="primary" @click="delDisTri(null)">批量删除评论</el-button>
          </div>
        </el-tooltip>
      </template>
      <el-table
        v-loading="disTriLoading"
        :data="disTriList"
        style="width: 100%;"
        size="mini"
        class="table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column label="头像" min-width="60">
          <template slot-scope="{ row }">
            <div class="taoBox_img" v-viewer>
              <img v-lazy="$uploadURL(row.headImage)" :alt="$uploadURL(row.headImage)">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" min-width="120"></el-table-column>
        <el-table-column prop="mobile" label="手机号码" min-width="120"></el-table-column>
        <el-table-column label="是否显示" min-width="120">
          <template slot-scope="{ row }">
            <el-switch v-model.number="row.isShow" :active-value="1" :inactive-value="0" active-text="显示" inactive-text="隐藏" @change="change(row)" class="status"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" min-width="120">
          <template slot-scope="{ row }">
            <span v-if="row.createDateUTC"> {{ row.createDateUTC | uctTimeFileter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="editDisTri(row.id)">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" size="small" @click="delDisTri(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="disTriBox">
        <pagination
          v-show="pagination.total > 0"
          :total="pagination.total"
          :page.sync="pagination.page"
          :limit.sync="pagination.limit"
          :page-sizes="[10, 20, 30, 50]"
          @pagination="disTriChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  getDeliveryClerkList as getDistriClerkList,
  patchDeliveryClerk as patchDistriClerk,
  deleteDeliveryClerk as delDisTriClerk
} from '@/api/setting'

export default {
  name: 'Index',
  data() {
    return {
      grid: {
        xl: 5,
        lg: 7,
        md: 12,
        sm: 12,
        xs: 24
      },
      disTriLoading: false,
      disabledDisTri: true,
      disTriList: [],
      del: [],
      tableFrom: {
        keyword: '',
        isShow: -99
      },
      pagination: {
        page: 1,
        limit: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    /**
     * 新增配送人
     */
    addDisTri() {
      const _this = this;
      this.$modal({
        componentProps: {
          isEdit: 0,
        },
        component: (resolve) => require(['./components/disTriCom'], resolve),
        props: {
          title: '添加配送员',
          customClass: 'zdyDialogCls disTriDialogCls',
          width: '100%'
        },
        methods: {
          getDisTriList() {
            _this.$set(_this.pagination, 'page', 1);
            _this.getList();
          }
        }
      });
    },
    /**
     * 编辑配送人
     */
    editDisTri(id) {
      const _this = this;
      this.$modal({
        componentProps: {
          isEdit: 1,
          id: id
        },
        component: (resolve) => require(['./components/disTriCom'], resolve),
        props: {
          title: '编辑配送员',
          customClass: 'zdyDialogCls disTriDialogCls',
          width: '100%'
        },
        methods: {
          getDisTriList() {
            _this.$set(_this.pagination, 'page', 1);
            _this.getList();
          }
        }
      });
    },
    /**
     * 删除
     */
    delDisTri(id) {
      id || (this.del.length !== 0 && !this.disabledDisTri) ? this.$confirm(`删除配送员`, {
        title: `删除配送员`,
        message: this.$createElement('div', null, ['确定要删除配送员吗？', '删除配送员后将无法恢复，请谨慎操作！'].map((item) => this.$createElement('p', null, item))),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delDisTriClerk(!id ? `(${ this.del.join() })` : id).then(() => {
          this.$message.success('删除配送员成功！')
          this.getList('1');
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: `已取消删除配送员`
        });
      }) : this.$message.warning('请至少选择一条数据');
    },
    handleSelectionChange(val) {
      this.$set(this, 'del', val.map((item) => item.id));
      this.del.length !== 0 ? this.disabledDisTri = false : this.disabledDisTri = true;
    },
    /**
     * 获取配送员
     */
    getList(num) {
      this.$set(this, 'disTriLoading', true);
      getDistriClerkList({
        pageNumber: num ? num : this.pagination.page,
        pageSize: this.pagination.limit,
        orderBy: 'Id desc',
        keyword: this.tableFrom.keyword,
        isshow: this.tableFrom.isShow == -99 ? -1 : this.tableFrom.isShow
      }).then(res => {
        this.$set(this, 'disTriList', res.data)
        this.$set(this.pagination, 'total', res.head.totalCount)
        this.$set(this, 'disTriLoading', false)
      }).catch(() => {
        this.$set(this, 'disTriList', [])
        this.$set(this.pagination, 'total', 0)
        this.$set(this, 'disTriLoading', false)
      });
    },
    disTriChange(disTri) {
      this.$set(this.pagination, 'page', disTri.page)
      this.$set(this.pagination, 'limit', disTri.limit)
      this.getList();
    },
    change(row) {
      patchDistriClerk([{
        op: 'replace',
        path: '/isshow',
        value: row.isShow
      }], row.id).then(() => {
        this.$message.success('修改成功');
      }).catch(() => {
        row.isShow == 0 ? row.isShow = 1 : row.isShow = 0;
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .disTriList {
    .taoBox_img {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>

<style lang="scss">
  .el-dialog.disTriDialogCls {
    max-width: 700px;
  }
</style>
